<template>
	<view class="container">
		<popup-layer v-if="boolShow" ref="popupRef" :direction="'left'">
			<view class="typeBox">
				<view class="title">筛选</view>
				<view v-if="curType == '燃气报警'">
					<type-tab  :title="'报警级别'"  :tabs.sync="alarmTypes"></type-tab>
					<type-tab  :title="'报警状态'" :tabs.sync="alarmStatus"></type-tab>
				</view>
				<view v-else>
					<type-tab :title="'设备状态'"  :tabs.sync="runStatus"></type-tab>
					<type-tab :title="'报警状态'"  :tabs.sync="ravelflags"></type-tab>
				</view>
			</view>
		</popup-layer>
		<view class="header">
			<view class="flex_center_row title" :style="titleBoxStyle">
				
				<uni-search-bar 
					@confirm="getkeyword" 
					@clear="getkeyword"
					:style="searchInputStyle"
					ref='searchBar'
					>
				</uni-search-bar>
				
			</view>
			<view class="flex_between_row tab_wrap">
				<view class="tab_box flex_between_row">
					<view class="act" v-for="item in btns" :key="item.id" :class="{ cur: curType == item.type }" @click="changeType(item.type)">
						{{ item.type }}
						<text v-if="item.num">{{ item.num }}</text>
					</view>
				</view>
				
				<view @click="showFilterBox">
					<text>筛选</text>
					<image src="../../../static/img/alarm/filter.png"></image>
				</view>
			<!-- 	 -->
			</view>
		</view>
		<view class="listWrap">
					
					
					<template v-if="curType == '燃气报警'">
						<image class="no_alarm" :src="noDataUrl" v-if="showNoAlarmImg" mode="widthFix"></image>
						<J-skeleton
						  :loading="skeletonIsShow"
						  :avatarSize="'82rpx'"
						  :row="2"
						  showTitle
						  animate
						  avatarShape='square'
						  v-for="(item,index) in monitorData"
						  :key="index"
						  >
							<monitor-item :monitorData="item" ></monitor-item>
						</J-skeleton>
					</template>
					<template v-else>
						<image class="no_alarm" :src="noDataUrl" v-if="showNoEquipImg" mode="widthFix"></image>
						<J-skeleton
						  :loading="equipSkeletonIsShow"
						  :avatarSize="'82rpx'"
						  :row="2"
						  showTitle
						  animates
						  avatarShape='square'
						  v-for="(item,index) in equipMonitorData"
						  :key="index"
						  >
						  <realtime-monitor-item :realtimeMonitorData="item" ></realtime-monitor-item>
						  </J-skeleton>
					</template>
			
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
import { mapActions, mapState,mapMutations } from 'vuex';
import { mixin } from '../../../common/mixins.js';
let vm;
export default {
	data() {
		return {
			showNoAlarmImg:false,
			showNoEquipImg:false,
			alarmParams:{
				offset:'',
				dataSize:''
			},
			equipParams:{
				offset:'',
				dataSize:''
			},
			search:'',
			skeletonIsShow:true,
			equipSkeletonIsShow:true,
			scrollTop:0,
			titleBoxStyle:`z-index: 999;background:rgba(65, 115, 241, 1)`,
			curType: '燃气报警',
			boolShow: false,
			alarmTypes: [
				{
					id: 1,
					value: '1级（高）',
					checked: false
				},
				{
					id: 2,
					value: '2级（中）',
					checked: false
				},
				{
					id: 3,
					value: '3级（低）',
					checked: false
				}
			],
			alarmStatus: [
				{
					id: 0,
					value: '未解除',
					checked: true
				},
				{
					id: 1,
					value: '已解除',
					checked: false
				}
			],
			ravelflags: [
				{
					id: 0,
					value: '未解除',
					checked: true
				},
				{
					id: 1,
					value: '已解除',
					checked: false
				}
			],
			runStatus:[
				{
					id: 'pump',
					value: '泵转速异常',
					checked: false
				},
				{
					id: 'dryer',
					value: '干燥剂失效',
					checked: false
				},
				{
					id: 'voltage',
					value: '电量不足',
					checked: false
				},
				{
					id: 'soak',
					value: '设备浸水',
					checked: false
				},
				{
					id: 'move',
					value: '设备移动',
					checked: false
				},
				{
					id: 'laser',
					value: '传感器异常',
					checked: false
				},
				{
					id: 'gps',
					value: 'GPS缺失',
					checked: false
				},
				{
					id: 'temperature',
					value: '温度异常',
					checked: false
				},
				{
					id: 'network',
					value: '通讯异常',
					checked: false
				}
			],
			// runStatus: [
			// 	{
			// 		id: 0,
			// 		value: '设备异常',
			// 		checked: true
			// 	},
			// 	{
			// 		id: 1,
			// 		value: '正常运行',
			// 		checked: true
			// 	}
			// ],
			level: '',
			ravelflag: '0',
			status: '',
			monitorData: [],
			equipMonitorData: [],
			monitorDataNotReadLen:0,
			realDataNotReadLen:0,
		};
	},
	mixins: [mixin],
	onShow() {
		//console.log('monitor onShow')
		vm = this;
		uni.showShareMenu()
		uni.getStorage({
			key:'userinfo',
			success(res){
				//console.log('userinfo',res)
				vm.setUserInfo(res.data);
				if(res.data.nickName){
					vm.getAlarmInfoFn();
					vm.getEquipMonitorFn();
	
				}else{	
					uni.showModal({
						title:'提示',
						content:'请授权用户信息,否则将以游客身份访问！',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../../views/login/login'
								})
							} else if (res.cancel) {
								vm.toggleAxios()
							}
						},
						
					})
				}
			},
			fail() {
				uni.showModal({
					title:'提示',
					content:'请授权用户信息,否则将以游客身份访问！',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'../../views/login/login'
							})
						} else if (res.cancel) {
							vm.toggleAxios()
						}
					}
				})
			}
		})
		uni.removeStorage({
			key:'monitorDetail'
		})
		uni.removeStorage({
			key:'realtimeMonitorDetail'
		})
		uni.removeStorage({
			key:'curMarkerId'
		})
	
	},

	mounted() {
		
		uni.$on('loginSuccess', () => {
			vm.getAlarmInfoFn();
			vm.getEquipMonitorFn();
		});
		
		// 监听 报警解除成功事件
		uni.$on('relieveAlarmSuccess', () => {
			vm.changeType(this.curType);
			uni.removeStorage({
				key:'monitorDetail'
			})
			uni.removeStorage({
				key:'equipId'
			})
		});
		
		// 监听 报警解除成功事件
		uni.$on('relieveAlarmEquipSuccess', () => {
			vm.changeType(this.curType);
			uni.removeStorage({
				key:'realtimeMonitorDetail'
			})
			uni.removeStorage({
				key:'equipId'
			})
		});
		// 从分析页点击级别进入
		uni.$on('filterAlarmFromAna', (level) => {
			if(level){
				this.curType = '燃气报警'
			}else{
				this.curType = '设备异常'
			}
			vm.alarmTypes.filter((item,index) => {
				item.checked = false
				if(item.id == level){
					vm.$set(vm.alarmTypes[index],'checked',true)
				}
			})
		});
	},
	beforeDestroy() {
		uni.$off('filterAlarmFromAna')
	},
	onPageScroll(e){
		this.scrollTop = e.scrollTop
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
			searchInputStyle: ({ user }) => user.searchInputStyle,
			// tmplIds: ({ tmplate }) => tmplate.tmplIds,
			isSubscribed: ({ tmplate }) => tmplate.isSubscribed
		}),
		btns(){
			return [
				{
					id: 0,
					type: '燃气报警',
					num: this.monitorDataNotReadLen
				},
				{
					id: 1,
					type: '设备异常',
					num: this.realDataNotReadLen
				}
			]
		}
	},
	watch: {
		scrollTop(newVal){
			if(newVal < 0){
				this.titleBoxStyle =`
				z-index: 999;
				background:rgba(65, 115, 241, 1)
				`
			}else{
				let opacity = newVal * 0.006
				this.titleBoxStyle =`
				z-index: 999;
				background:rgba(65, 115, 241, ${opacity})
				`
			}
			
		},
		
		curType: {
			handler(newVal) {
				uni.setStorage({
					key:'curType',
					data:newVal
				})
			},
			immediate: true
		},
		alarmTypes: {
			handler(newVal) {
				this.transformArrToStr(newVal, 'level');
				this.resetAlarm()
				this.getAlarmInfoFn();
			},
			deep: true,
		},
		alarmStatus: {
			handler(newVal) {
				this.transformArrToStr(newVal, 'ravelflag');
				this.resetAlarm()
				this.getAlarmInfoFn();
			},
			deep: true,
		},
		ravelflags: {
			handler(newVal) {
				this.transformArrToStr(newVal, 'ravelflag');
				this.resetEquip()
				this.getEquipMonitorFn();
			},
			deep: true
		},
		runStatus: {
			handler(newVal) {
				this.transformArrToStr(newVal, 'status');
				this.resetEquip()
				this.getEquipMonitorFn();
			},
			deep: true
		},
		// totalNotRead(newVal){
		// 	uni.setTabBarBadge({
		// 	  index: 0,
		// 	  text: `${newVal}`
		// 	})
		// }
		
	},
	onHide() {
		this.clearOffset()
		this.monitorData = [];
		this.equipMonitorData = [];
	},
	onReachBottom(){
		
		vm.toggleAxios()
	},
	methods: {
		// ...mapActions('user', ['setUserInfo']),
		...mapMutations('user', ['setUserInfo']),
		unique(arr, attrName) {
			const res = new Map();
			return arr.filter(a => !res.has(a[attrName]) && res.set(a[attrName], 1));
		},
		getkeyword(data) {
			vm.search = data.value
			this.clearOffset()
			if (this.curType == '燃气报警') {
				this.monitorData = [];
			} else {
				this.equipMonitorData = [];
			}
			this.toggleAxios()
			
		},
		showFilterBox(){
			this.boolShow = true;
			this.$nextTick(function(){
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			})
		},
		resetAlarm() {
			this.monitorData = [];
			this.skeletonIsShow = true;
			this.clearOffset()
		},
		resetEquip() {
			this.equipMonitorData = [];
			this.equipSkeletonIsShow = true;
			this.clearOffset()
		},
		clearOffset(){
			this.alarmParams = Object.assign(this.alarmParams,{
				offset:''
			})
			this.equipParams = Object.assign(this.equipParams,{
				offset:''
			})
		},
		changeType(type) {
			this.curType = type;
			if(type == '燃气报警'){
				this.resetAlarm()
			}else{
				this.resetEquip()
			}
			this.$refs.searchBar.clear()
		},
		toggleAxios(){
			if (this.curType == '燃气报警') {
				if(this.alarmParams.offset == '0') return
				this.getAlarmInfoFn();
			} else {
				if(this.equipParams.offset == '0') return
				this.getEquipMonitorFn();
			}
		},
		getAlarmInfoFn() {
			//console.log('vm.userInfo.nickName',vm.userInfo.nickName)
			// 接口获取燃气报警信息
			this.$api
				.getAlarmInfo({
					level: this.level,
					ravelflag: this.ravelflag,
					userName: vm.userInfo.nickName,
					search:this.search,
					offset:this.alarmParams.offset || ''
				})
				.then(res => {
					
					this.monitorData = this.monitorData.concat(res.data.data);
					this.monitorData = 	this.unique(this.monitorData,'alarmId')
					//console.log('this.monitorData',this.monitorData)
					if(!this.monitorData.length) {
						this.showNoAlarmImg = true
						this.monitorData = []
						this.monitorDataNotReadLen = 0
						return
					}
					 
					this.showNoAlarmImg = false
					
					setTimeout(()=>{
						vm.skeletonIsShow = false
					},300)
					let monitorDataNotRead = this.monitorData.filter(item => !item.isRead)
					
					this.monitorDataNotReadLen = monitorDataNotRead.length
					
					
					
					this.alarmParams = Object.assign(this.alarmParams,{
						offset:res.data.offset,
						dataSize:res.data.dataSize
					})
					if(this.search){
						this.monitorData = []
						this.monitorData = res.data.data
					}
					// if(this.alarmParams.offset){
						
					// 	this.monitorData.push(res.data.data)
					// 	debugger
					// }
					
				});
		},
		getEquipMonitorFn() {
			// // 接口获取设备列表信息
			this.$api
				.getEquipMonitor({
					ravelflag: this.ravelflag,
					userName: vm.userInfo.nickName,
					runStatus: this.status,
					search:this.search,
					offset:this.equipParams.offset  || ''
				})
				.then(res => {
					//console.log(res)
					
					
					this.equipMonitorData = this.equipMonitorData.concat(res.data.data)
					this.equipMonitorData = this.unique(this.equipMonitorData,'markerId')
					
					if(!this.equipMonitorData.length) {
						this.showNoEquipImg = true
						this.equipMonitorData = []
						this.realDataNotReadLen = 0
						return
					}
					this.showNoEquipImg = false
					
					setTimeout(()=>{
						vm.equipSkeletonIsShow = false
					},300)
					let realDataNotRead = this.equipMonitorData.filter(item => !item.isRead)
					this.realDataNotReadLen = realDataNotRead.length
					
					//console.log('this.btns',this.btns)
					
					this.equipParams = Object.assign(this.equipParams,{
						offset:res.data.offset,
						dataSize:res.data.dataSize
					})
					
					if(this.search){
						this.equipMonitorData = []
						this.monitorData = res.data.data
					}
					
				})
		}
	}
};
</script>

<style lang="scss" scoped>

	.typeBox{
		width: 66vw;
		.title{
			height: 250rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: bold;
			color: $uni-text-color-black;
			padding-left: $uni-spacing-col-36;
		}
	}
	.no_alarm{
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
.container {
	background-size: 100% 400rpx;
	background-position: top center;
	background-repeat: no-repeat;
	background: $uni-bg-color;
	overflow-y: auto;
}
.header {
	position: relative;
    width: 100%;
	height: 295rpx;
	padding: 0 $uni-spacing-col-36;
	.flex_between_row {
		height: 70rpx;
	}
	.title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transition: all .3s;
		justify-content: flex-start;
		padding-left: $uni-spacing-col-36;
		input{
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 70rpx;
			margin-left: 48rpx;
			margin-right: 215rpx;
			margin-bottom: 50rpx;
			background: #FFFFFF;
		}
	}
	.tab_wrap{
		position: absolute;
		z-index: 888;
		bottom: 28rpx;
		left: $uni-spacing-col-36;
		right: $uni-spacing-col-36;
		color: #FFFFFF;
	}
	.tab_box {
		width: 280rpx;
		.cur {
			position: relative;
			font-size: 34rpx !important;
			font-weight: 600;
			opacity: 1;
			&::after {
				position: absolute;
				content: '';
				width: 60rpx;
				height: 6rpx;
				background: url(../../../static/img/alarm/line.png) no-repeat left center;
				background-size: 100% 100%;
				left: 50%;
				bottom: -14rpx;
				transform: translateX(-50%);
			}
		}
		view {
			position: relative;
			transform: skewX(-10deg);
			transition: all .3s;
			opacity: .8;
			font-size: 32rpx !important;
			margin-right: 70rpx;
		}
		text {
			position: absolute;
			right: -36rpx;
			top: -10rpx;
			background: red;
			color: #fff;
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			font-size: 10px !important;
			background: url(../../../static/img/alarm/mark.png) no-repeat center;
			background-size: cover;
		}
	}
	image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
		position: relative;
		top: 4rpx;
	}
}
.filter_box {
	margin: 0 30rpx;
	// height: 340rpx;
	padding: 20rpx 30rpx 10rpx;
	border-radius: 10rpx;
	background: #ffffff;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
}
type-tab {
	margin-bottom: 30rpx;
}
.search_box {
	position: relative;
	margin: 0 30rpx;
	height: 80rpx;
	flex-shrink: 0;
	view:first-child {
		color: #666;
		font-size: 28rpx;
	}
	view:last-child {
		color: $uni-color-primary;
		color: #666;
		display: flex;
		align-items: center;
	}
	text {
		font-size: 32rpx;
		color: $uni-color-primary;
		margin: 0 6rpx;
	}
	image {
		width: 30rpx;
		height: 30rpx;
		margin: 0 10rpx;
	}
	.subscribe_btn {
		// position: relative;
		// right: -20rpx;
		// border-radius: 10rpx;
		// height: 40rpx;
		// line-height: 40rpx;
		// font-size: 28rpx;
		// color: #fff !important;
	}
}
.listWrap{
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	padding: $uni-spacing-col-36;
	background: linear-gradient(top,#E8F4FE,#E7F1F4);
	min-height: calc(100vh - 295rpx);
	transform-style: preserve-3d;
	perspective: 1500px;
}
.btn_getuserinfo {
	height: 100rpx;
	line-height: 100rpx;
}
</style>
